<template>
  <div class="app-container">
    <el-row :gutter="0" class="el-card is-always-shadow el-card__body content_h">
      <el-col class="title_tops">
        <div class="title_tops_t">
          <div class="title_top_E">Medical Management</div>
          <div class="title_top_C">医护管理</div>
        </div>
        <div class="title_tops_b" @click="tabGo">
          <img src="../../assets/iconfont/arrow-left-circle.png" alt="" srcset="">
          <span>返回科室管理</span>
        </div>
      </el-col>
      <el-col class="screen_case screen_caseMD">
        <div class="screen_case_title">{{ titleFrom.deptName }}</div>
        <div class="screen_case_amount">
          <span class="screen_case_amount_lable">医护数量：</span>
          <span class="screen_case_amount_value">{{ total }}</span>
        </div>
        <construction title="新建医护" @addition="additions" class="screen_caseMD" />
        <screenSelect title="医护名称" type='input' v-model="screenFrom.staffName" :isValue='screenFrom.staffName'
          placeholder="请输入医护名称" @transfer="valueHeld($event, 'staffName')" class="screen_caseMD" width="148px" />
        <el-button type="primary" class="ch_button screen_caseMD" @click="search">
          <img class="ch_button_img" src="../../assets/iconfont/zoom-out.png" alt="" srcset="">
          <div>搜索</div>
        </el-button>
        <el-button type="primary" class="ch_button screen_caseMD" @click="grade">
          <img class="ch_button_img" src="../../assets/iconfont/iconkey.png" alt="" srcset="">
          <div>等级权限管理</div>
        </el-button>
        <el-button type="primary" class="ch_button " :disabled="isDerive" @click="derive">
          <img class="ch_button_img" src="../../assets/iconfont/share.png" alt="" srcset="">
          <div>数据导出</div>
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="0" class="card_content">
      <template v-for="(item, index) in cardData">
        <smallCard :title="item.staffName" :subhead="'所属科室：' + item.deptName" :subheading="'医护类型：' + item.typeName"
          @clickHeld="multifunction($event, item.staffId)" :img="item.staffAvatarUrl"
          :line="item.status == 0 ? true : false" buttons="2" type="medicalcare" />
      </template>
      <div class="paginationblock" v-if="cardData.length > 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageData.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pageSize"
          :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-row>
    <el-dialog id="viewHeld" custom-class="eldialogCH" :modal="true" :visible.sync="viewHeld" :show-close='false'
      center>
      <div slot="title" class="dialog_title_ch">
        <div>
          <div class="dialog_title_ch_subheading">
            Service Record
          </div>
          <div class="dialog_title_ch_subhead">
            医护信息详情
          </div>
        </div>
        <div class="icon_x-circle" @click="viewHeld = false"></div>
        <!-- <img class="icon_x-circle" src="../../assets/iconfont/x-circle.png" alt="" @click="viewHeld = false"> -->
      </div>
      <div class="dialog_title_ch_conter">
        <div class="dialog_title_ch_conter_left">
          <img :src="addFrom.staffAvatarUrl" alt="" srcset="">
          <div class="quan" :class="addFrom.status == 0 ? 'on_line' : 'off_line'"></div>
        </div>
        <div class="dialog_title_ch_conter_right">
          <div class="postTitle">{{ addFrom.staffName }}</div>
          <div class="postTitle_conter">
            <div class="postTitle_conter_item">
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">所属机构：</span>
                <span class="postTitle_conter_itemspan2">{{ addFrom.hospitalName }}</span>
              </div>
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">医护类型：</span>
                <span class="postTitle_conter_itemspan2">{{ addFrom.typeName }}</span>
              </div>
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">医护职称：</span>
                <span class="postTitle_conter_itemspan2">{{ addFrom.titleName }}</span>
              </div>
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">所在科室：</span>
                <span class="postTitle_conter_itemspan2">{{ addFrom.deptName }}</span>
              </div>
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">等级权限：</span>
                <span class="postTitle_conter_itemspan2">{{ addFrom.permissionName }}</span>
              </div>
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">联系电话：</span>
                <span class="postTitle_conter_itemspan2">{{ addFrom.phone }}</span>
              </div>
              <div class="postTitle_conter_itemspan">
                <span class="postTitle_conter_itemspan1">创建时间：</span>
                <span class="postTitle_conter_itemspan2">{{ parseTime(addFrom.createTime, '{y}.{m}.{d}') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import smallCard from '@/components/smallCard/index.vue'
import { getStaffList, getStaffDelete ,getStaffExpor} from '@/api/medic'
import { getHosPartDetail } from '@/api/administrative'
import {
  mapGetters
} from 'vuex'
export default {
  name: "Field",
  components: {
    construction,
    screenSelect,
    smallCard
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ])
  },
  data() {
    return {
      keshi: 0,
      viewHeld: false,
      editHeld: false,
      familyHeld: false,
      options: [{
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '广州'
      }, {
        value: 'Dalian',
        label: '大连'
      }],
      cardData: [],
      imageUrl: '',
      fuliid: '',
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      screenFrom: {
        title: '',
        staffName: ''
      },
      addFrom: {},
      titleFrom: {},
      total: 0,
      isDerive: false
    };
  },
  mounted() {
    this.fuliid = this.$route.params.id
    console.log(this.$route);
    this.getList()
    this.getHosPart()
  },

  methods: {
    derive() {
      this.isDerive = true
      getStaffExpor(this.$route.params.id).then(res => {
        const link = document.createElement('a')
        const blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        console.log(res);
        const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1].substring(7));
        link.setAttribute('download',fileName)
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.click()
        setTimeout(()=>{
        	this.isDerive = false
        },5000)
      }).catch(err=>{
      	setTimeout(()=>{
      		this.isDerive = false
      	},5000)
      })
    },
    tabGo() {
      this.$router.go(-1)
    },
    getHosPart() {
      getHosPartDetail(this.$route.params.id).then(res => {
        if (res.code == 200) {
          this.titleFrom = res.data.hospitalDepart
        }
      })
    },
    getList() {
      let that = this
      const loading = that.$loading({
        lock: true,
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getStaffList(this.screenFrom, this.$route.params.id, this.pageData).then(res => {
        if (res.code == 200) {
          this.cardData = res.data.staffPage.records
          this.total = res.data.staffPage.total
          loading.close()
        }
      })
    },
    additions() {
      this.$router.push({ path: `/organizational/medicalcareedit/0/${this.$route.params.id}` })
    },
    search() {
      this.pageData = {
        pageNo: 1,
        pageSize: 10
      }
      this.getList()
    },
    grade() {
      console.log('等级权限管理medicalauthority', this.fuliid);
      this.$router.push({ path: `/organizational/medicalauthority/${this.fuliid}` })
    },
    valueHeld(childParam, fatherparam) {
      this.screenFrom[fatherparam] = childParam
    },
    multifunction(e, id) {
      if (e == 'editHeld') {
        this.$router.push({
          path: `/organizational/medicalcareedit/${id}/${this.$route.params.id}`
        })
      } else if (e == 'deleteHeld') {
        this.$confirm('此操作将永久删除该医护, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          getStaffDelete(id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList()
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
      else {
        this.cardData.map(item => {
          if (item.staffId == id) {
            this.addFrom = item
          }
        })
        this[e] = true
      }
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageData.pageNo = val
      this.getList()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  overflow-y: auto;
}

.card_content {
  margin-top: 16px;
  height: calc(100% - 170px);
  overflow-y: auto;
}

.card_contents {
  height: calc(100% - 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .card_contents_tex {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
  }

  .card_contents_footer {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #EFEFEF;
  }
}

.content_h {
  min-height: 149px;
  border-radius: 5px;
  padding: 0px;
}

.title_top {
  min-height: 79px;
  border-bottom: 1px solid #EFEFEF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px;
}

.title_tops {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  height: 79px;
  border-bottom: 1px solid #EFEFEF;

  .title_tops_t {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .title_tops_b {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 28px;
    cursor: pointer;

    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
    }

    span {
      font-size: 16px;
      font-weight: 400;
      color: #000;
    }
  }
}

.screen_case_title {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin-right: 35px;
}

.title_top_E {
  font-size: 12px;
  font-weight: 400;
  color: #9898989E;
}

.title_top_C {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

.screen_case {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px 30px;
}

.screen_case_amount {
  min-width: 193px;

  .screen_case_amount_lable {
    font-size: 15px;
    color: #989898;
  }

  .screen_case_amount_value {
    font-size: 16px;
    color: #000;
  }
}

.construction {
  margin-left: 0;
}

::v-deep .el-button.ch_button {
  padding: 8px 9px;
}

::v-deep .el-button.ch_button span {
  display: flex;
  align-items: center;

  div {
    font-size: 13px;
    font-weight: 400;
    margin-left: 4px;
  }
}

#viewHeld,
#editHeld,
#familyHeld {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .eldialogCH {
  border-radius: 6px;
  width: 1268px;
  margin-top: 0 !important;
}

::v-deep #editHeld .eldialogCH {
  width: 1579px;
}

::v-deep .ch_button_seav {
  padding: 7px 27px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      font-size: 16px;
      font-weight: 400;
      margin-left: 10px;
    }
  }

}

.ch_button_img_seav {
  width: 24px;
  height: 24px;
}

.ch_button_img {
  width: 16px;
  height: 16px;
}

.dialog_title_ch {
  border-bottom: 1px solid #EFEFEF;
  padding: 25px 21px 13px 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon_x-circle {
  width: 24px;
  height: 24px;
  background: url(../../assets/iconfont/x-circle.png);
  background-size: 100% 100%;
  cursor: pointer;
}

.icon_x-circle:active {
  background: url(../../assets/iconfont/x-circleactive.png);
  background-size: 100% 100%;
  // opacity: .6;
}

::v-deep #viewHeld .el-dialog__header,
::v-deep #editHeld .el-dialog__header,
::v-deep #familyHeld .el-dialog__header {
  padding: 0 !important;
  text-align: left;
}

::v-deep #viewHeld .el-dialog__body,
::v-deep #editHeld .el-dialog__body,
::v-deep #familyHeld .el-dialog__body {
  padding: 17px 20px;
}

::v-deep #editHeld .el-dialog__footer {
  padding: 17px 20px;
  border-top: 1px solid #EFEFEF;
}

.dialog_title_ch_subheading {
  font-size: 12px;
  font-weight: 400;
  color: #9898989E;
}

.dialog_title_ch_subhead {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

.dialog_title_ch_conter_operate {
  padding: 24px 35px;
  // border: 1px solid #EBEBEB;
  border-radius: 2px;
  display: flex;
  // align-items: center;
}

.dialog_title_ch_conter {
  padding: 24px 35px;
  border: 1px solid #EBEBEB;
  border-radius: 2px;
  display: flex;
  // align-items: center;

  .dialog_title_ch_conter_left {
    position: relative;
    width: 80px;
    height: 80px;
    margin-right: 33px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }

    .quan {
      position: absolute;
      bottom: 0;
      right: 0;
      border: 2px solid #FFFFFF;
      width: 20px;
      height: 20px;
      border-radius: 100%;
    }
  }

  .dialog_title_ch_conter_right {
    flex: 1;
  }

  .postTitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 8px;
    color: #000;
  }

  .postTitle_conter {
    display: flex;
    // align-items: center;
    justify-content: space-between;

    .postTitle_conter_item {
      flex: auto;

      .postTitle_conter_itemspan {
        margin: 8px 0;
        display: inline-block;
        margin-right: 49px;

        .postTitle_conter_itemspan1 {
          font-size: 15px;
          font-weight: 400;
          color: #989898;
        }

        .postTitle_conter_itemspan2 {
          font-size: 16px;
          font-weight: 400;
          color: #000;
        }
      }
    }
  }
}

.on_line {
  background-color: #19CDA6;
}

.off_line {
  background-color: #FE294D;
}

/*
  编辑
  */
.editHeld_conter_left {
  margin-right: 70px;
  text-align: center;
}

.editHeld_conter_right {
  flex: 1;

  .el-row {
    margin-bottom: 45px;
  }
}

::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
}

// ::v-deep  .avatar-uploader .el-upload:hover {
//   border-color: #409EFF;
// }
.editHeld_conter_left .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}

.editHeld_conter_left .avatar {
  width: 160px;
  height: 160px;
  display: block;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000066;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFFAA;
  }
}
</style>
